<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>REPORT VIEW COMPONENT</title>
<!--meta http-equiv="X-UA-Compatible" content="IE=edge"-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css" />
<link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style.css" />

<script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../api/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
<script type='text/JavaScript' src='../../api/report_view.js'></script>

<!--Added by jaroudnh on 2/17/2014 for dropdown favorites...-->
<script type="text/javascript" src="../../api/js/ui.tabs.paging.js"></script>

<!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
<script type="text/javascript">
/* IMPORTANT: REQUIRED FOR FLASH BASED REPORTS TO COMMUNICATE WITH BOI */

/************************************************************/

function setSWFIsReady(movieName) {
    BOI.Flash.setSWFIsReady(movieName, document);
}
function rangeChangeHandler(movieName, rangeName) {
    BOI.Flash.rangeChangeHandler(movieName, rangeName, document);
}
/************************************************************/


var docid = undefined;
var doctype = undefined;
var homepage_loaded = false;

function removeDefaultHome(){

    // Remove the tab
    var tab = $( "#tabs" ).find( ".ui-tabs-nav li[aria-controls='tabs-1']" ).remove();
    // Find the id of the associated panel
    var panelId = tab.attr( "aria-controls" );
    // Remove the panel
    $( "#" + panelId ).remove();
    // Refresh the tabs widget
    $( "tabs" ).tabs( "refresh" );

}
$( function () {
    BOI.single_variable_screen=true;
    BOI.Events.addListener(BOI.Events.loaddata, function(args){
        // this event is thrown after the swf is loaded.
        // now the report need to be loaded with actual data
        var report = BOI.getContextReport(args[0]);
        //openReport(report);
        if(report){
            BOI.openReport(report.id, report.type, undefined, true, 'rep_' + report.tech_name, true, function () {
            }, document);
        }
    });

    BOI.Events.addListener(BOI.Events.repvarchange, function (args) { //args[0] is the rep id
        var report = BOI.getContextReport(args[0]);
        if (report) {
            //ensure all reports having same variables are in refresh needed state
            if(BOI.single_variable_screen){ // this is to restrict the variable screen refresh
                for (var i in report.variables) {
                    for (var j in BOI.context.reports) {
                        if (BOI.context.reports[j].variables[i])
                        //
                            BOI.context.reports[j].state = BOILib.ReportStates.RefreshNeeded;
                    }
                }
            }
            //properties.current_report = report;
            setReportStateExecuted(report.id);
            openReport(report);
            $('#dialog').hide();
            showTitle();
            $('#tabs').toggle();
        }
    });
    BOI.Events.addListener(BOI.Events.varchange, function (args) { //args[0] is the varname, args[1] is value/values

        var variable = BOI.context.variables[args[0]];
        variable.value = args[1];
        for (var i in  properties.executed_reports) {
            if (i != undefined) {
                var rep = properties.executed_reports[i];
                if(rep)
                    if (rep.variables[args[0]]) //report uses this variable?
                    {
                        //reload the report
                        setReportStateExecuted(rep.id);
                        openReport(rep);
                        $('.tabs ul.tab-title li').each(function () {

                            if($(this)[0].innerText.substring(0, $(this)[0].innerText.length-2)!=properties.executed_reports[i].label){
                                rep.state=BOILib.ReportStates.RefreshNeeded;
                            }

                        });
                    }
            }
        }
    });
    BOI.Events.addListener(BOI.Events.app_loaded, function (args) { //args[0] is the rep id
        if(BOI.app_params.ICON=="NO_SHOW"){
            hideIcons();
        }
        var rep_name = args[0];
        if (homepage_loaded == false){
            homepage_loaded = true;
            if (typeof rep_name == 'string') {
                // Check the report is empty or not
                if (rep_name != "") {
                    //var extension = rep_name.split('.').pop();
                    if (rep_name.indexOf('.') >= 0) {
                        $("#tabs-1").html('<iframe  style="height:100%;" frameborder="0"  src="' + rep_name + '" name="HOME_PG"></iframe>');
                        $('#drilldown_id').css("display", "none");
                        $('.icon-varscreen').css("display", "none");
                        $('.icon-favourites').css("display", "none");
                        $('.icon-reportcomment').css("display", "none");
                    }
                    else {
                        removeDefaultHome();
                        var report = BOI.getContextReport(args[0]);
                        if (report) {
                            setReportStateExecuted(report.id);
                            // $("#tabs-1").html('<iframe name="' + report.id + '"></iframe>');
                            //openReport(report);
                            addTab(report.id, report.tech_name, report.label, report.type);
                        }
                    }
                }
            }
        }
    });

    BOI.Events.addListener(BOI.Events.full_book, function (args) { //args[0] is the rep id
        // var report = BOI.getContextReport(args[0]);
        var report = BOI.getContextReportByTitle(args[0]);
        if (report) {
            $("#bi_comment").css("display" ,"block");
            docid = report.tech_name;
            doctype = report.type;

            setReportStateExecuted(report.id);
            var li = $('#tabs ul li[rep_id="' + report.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report.id, report.tech_name, report.label, report.type);
        }
    });

    BOI.Events.addListener(BOI.Events.repopen, function (args) { //args[0] is the rep id
        var report = BOI.getContextReport(args[0]);

        if (report) {
            if((report.type == 'BO_CRYSTAL' || report.type == 'URL') && report.tech_name !="ADMIN_PAGE"){
                $("#bi_comment").css("display" ,"block");
                docid = report.tech_name;
                doctype = report.type;
            }
            else {
                $("#bi_comment").css("display" ,"none");
            }
            setReportStateExecuted(report.id);
            var li = $('#tabs ul li[rep_id="' + report.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report.id, report.tech_name, report.label, report.type);
        }
        if(BOI.app_params.ICON=="NO_SHOW"){
            hideIcons();
        }
        toggleView('tabs');
    });
    BOI.Events.addListener(BOI.Events.favopen, function (args) { //args[0] is the rep id
        var report = BOI.getContextReport(args[0]);
        if (report) {
            setReportStateExecuted(report.id);
            var li = $('#tabs ul li[rep_id="' + report.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report.id, report.tech_name, report.label, report.type, true);
        }
    });
    BOI.Events.addListener(BOI.Events.groupopen, function (args) { //args[0] is the group id
        var report_group = BOI.getContextReport(args[0]);
        if (report_group) {
            if(report_group.type == 'BO_CRYSTAL' || report_group.type == 'URL'){
                $("#bi_comment").css("display" ,"block");
            }
            else {
                $("#bi_comment").css("display" ,"none");
            }
            setReportStateExecuted(report_group.id);
            var li = $('#tabs ul li[rep_id="' + report_group.id + '"]');
            if (li.get(0)) {
                tabs.tabs('option', 'active', li.index());
            }
            else
                addTab(report_group.id, report_group.tech_name, report_group.label, report_group.type);
        }
    });
    BOI.Events.addListener(BOI.Events.resize, function (args) {
        var location = args[0];
        var max_a = $('#' + activeTab).find('[LOC="' + location + '"] a.resize');
        var title = max_a.attr('title');
        var max_img = $('#' + activeTab).find('[LOC="' + location + '"] img.min-max-img');
        if(title == "Maximize"){
            $('#' + activeTab).find('[LOC="' + location + '"] div.kpi-cover').attr('class', 'maximize');
            $('#' + activeTab).find('[LOC="' + location + '"] span.toolbar').attr('class', 'maximize-toolbar');
            $('#' + activeTab).find('[LOC="' + location + '"] div.kpi-cover').closest('.shortwidebox').addClass('maximize');
            max_a.attr('title', 'Minimize');
//            max_img.attr('src', '../zbi_integration/img/icon/196.png');
            max_img.attr('src', '../zbi_integration/theme_02/img/icon/mis_icon_04_off.png');
            max_img.css('width:22; height:22;');
        }
        else {
            $('#' + activeTab).find('[LOC="' + location + '"] div.maximize').attr('class', 'kpi-cover');
            $('#' + activeTab).find('[LOC="' + location + '"] span.maximize-toolbar').attr('class', 'toolbar');
            $('#' + activeTab).find('[LOC="' + location + '"] div.kpi-cover').closest('.shortwidebox').removeClass('maximize');
            max_a.attr('title', 'Maximize');
            //max_img.attr('src', '../zbi_integration/img/icon/195.png');
            max_img.attr('src', '../zbi_integration/theme_02/img/icon/mis_icon_05_off.png');
            max_img.css('width:22; height:22;');
        }
    });

    } );
    function init() {
        tabs = $('#tabs').tabs(
                {
                    activate:function (event, ui) {
                        //activeTab = "tabs-" + (ui.newTab.index() + 1);
                        activeTab = ui.newTab.attr("aria-controls");
                        //if (ui.newTab.index() == 0) {
                        if(activeTab == 'tabs-1'){
                            $('#bi_fav_add').hide();
                            $('#bi_var_scr').hide();
                            $('#bi_comment').hide();
                            $('#dialog').hide("blind", 1000, function () {
                                $('.icon-varscreen').removeClass('icon-varscreen-active');
                            });
                            return;
                        }
                        else {
                            $('#bi_fav_add').show();
                            $('#bi_var_scr').show();
                            // $('#bi_comment').show();
                        }
                        var report = BOI.getContextReport($('#tabs li:eq(' + ui.newTab.index() + ')').attr("rep_id"));
                        //BOI.Events.raiseEvent(BOI.Events.repopen, report.id);
                        BOI.Events.raiseEvent(BOI.Events.repopen, [report.id]);

                        checkStatusAndExecute(report);
                    }
                });
        limit_tabs();

        $("#tabs span.ui-icon-close").live("click", function () {

            if ($('#dialog').is(':visible') == true) {
                $('#dialog').toggle();
            }

            var report = BOI.getContextReport($(this).closest("li").attr('rep_id'));
            resetReport(report);
            // Ansaj 2-feb-2014 : for variable screen selection removed when the report closed.
            $("#screen_id").get(0).contentWindow.rep_changed=true;
            $("#screen_id").get(0).contentWindow.displayvariable(report);
            for(var j in report.variables){
                report.variables[j].value="";
                report.variables[j].values="";
                // report.variables[j].ranges="";
            }
            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#" + panelId).css("visibility", "hidden");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
            limit_tabs(); //by jaroudnh
            //tabCounter--;
        });
    }

    var tabs,
            tabTitle = "tabtitle",
            tabTemplate = "<li rep_id='{rep_id}'><a href='#{href}'><span>#{label}</span></a> <span class='ui-icon ui-icon-close'>x</span></li>",
            tabContentTemplate = '<iframe frameborder="0" style="height:100%;" name="{rep_id}"></iframe>',
            tabContentTemplateDiv = '<div class="kpi_view" id="grp_{rep_id}"></div>',
            tabCounter = 2,
            activeTab = "tabs-1";
    function addTab(rep_id, tech_name, rep_name, rep_type, from_favorite) {
        if (BOI.getContextReport(rep_id).OPEN_STYLE != "_BLANK") {
            var id = "tabs-" + tabCounter,
                    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, rep_name).replace(/\{rep_id\}/g, rep_id)),
                    tabContentHtml = tabContentTemplate.replace(/\{rep_id\}/g, rep_id);
            if (rep_type == parent.BOILib.ReportTypes.ReportGroup)
                tabContentHtml = tabContentTemplateDiv.replace(/\{rep_id\}/g, rep_id);
            tabs.find(".ui-tabs-nav").append(li);
            tabs.find('.tab-content-inner').append("<div  id='" + id + "'>" + tabContentHtml + "</div>");
            //$("#" + id).attr('title', BOI.getContextReport(rep_id).label);
            //$('.tabs ul.tab-title').attr('title', BOI.getContextReport(rep_id).label);
            tabs.tabs("refresh");
            limit_tabs(); //by jaroudnh
            if (from_favorite) {
                BOI.openFavorite(BOI.favorites[rep_id], rep_id);
                var report = BOI.getContextReport(rep_id);
                report.state = BOILib.ReportStates.Current;
            }
            // if(BOI.getContextReport(rep_id).VARIABLE_SCREEN){
            //   $("#screen_id").get(0).contentWindow.rep_changed=true;
            // $("#screen_id").get(0).contentWindow.displayvariable(report);
            // }
            tabs.tabs('option', 'active', -1);
            //BOI.doc = document;
            properties.current_report.rep_id = rep_id;
            properties.current_report.rep_type = rep_type;
            tabCounter++;
            tabs.tabs("refresh");
            limit_tabs(); //by jaroudnh
        }
        else {
            checkStatusAndExecute(BOI.getContextReport(rep_id));
        }
    }
    function limit_tabs() {
        //Edited by jaroudnh
        jQuery('#tabs').tabs('paging', { cycle: true, follow: true, followOnSelect: true, selectOnAdd: true, cycle: true });
    }
    function hideIcons(){
        $('.icon-favourites').css("display", "none");
        $('.icon-varscreen').css("display", "none");
    }
    function showIcon(){
        $('.icon-favourites').css("display", "block");
        $('.icon-varscreen').css("display", "block");
    }
    function hideDrill() {
        $('#drilldown_id').css("display", "none");
        $('#tabs').css("display", "block");
        $('.icon-varscreen').css("display", "block");
        $('.icon-favourites').css("display", "block");
        $('.icon-reportcomment').css("display", "block");
    }

    function showDrill(){
        $('#drilldown_id').css("display", "block");
        $('#tabs').css("display", "none");
        $('.icon-varscreen').css("display", "none");
        $('.icon-favourites').css("display", "none");
        $('.icon-reportcomment').css("display", "none");
    }

</script>
<script type="text/javascript">
    /*Added by jaroudnh on 2/17/2014 for dropdown favorites...*/
    var is_vaf_loaded = false;
    function load_favorites() {
        if(!is_vaf_loaded)
        {
            is_vaf_loaded = true;
            $('#favs_iframe')[0].contentWindow.initialize();
        }
    }
    /*--------------------------------------------------------*/

    $(document).ready(function () {
        /*Added by jaroudnh on 2/17/2014 for dropdown favorites...*/
        $("#select").button({
            text:false, icons:{
                primary:"ui-icon-triangle-1-s"
            }}).click(function () {
                    //var menu = $(this).parent().next().show().position({my:"left top", at:"left bottom", of:this});
                    var menu = $(this).parent().next().show();
                    menu.css("left", "-290px");
                    menu.css("top", "25px");
                    $(document).one("click", function () {
                        menu.hide();
                    });
                    return false;
                }).parent().buttonset().next().hide().menu();
        /*--------------------------------------------------------*/


        $('.tab-title li').addClass('1ui-tabs-active');
        BOI.DrillSpec.hideDrill = hideDrill;
        BOI.DrillSpec.showDrill = showDrill;
        BOI.DrillSpec.init($('#drilldown_target'), $('#back_button_id'));
    });
    $('.icon-varscreen').live('click', function () {
        // $('#dialog').slideToggle();
        if ($('.icon-varscreen').hasClass('icon-varscreen-active')) {
            //$('#dialog').show("blind", 1000, function () { $('.icon-varscreen').addClass('icon-varscreen-active'); });
        }
        else {
            //  $('#dialog').hide("blind", 1000, function () { $('.icon-varscreen').removeClass('icon-varscreen-active'); });
        }
    });
    $('.icon-reportcomment').live('click', function () {
        var title = "Foot Note";
        var vbl = BOI.getContextVariable('ZMIS_HS_DASH_MONTH');
        var period = vbl.value;
        var htmlval = '<iframe frameborder="0" width="400" height="450"  src="../../../zbi_mis_dashbrd/bi_apps_mis_comment.htm?docid='+docid+'&type='+doctype+'&param='+period+'"> </iframe>';
        var htmlsrc = "../../../zbi_mis_dashbrd/bi_apps_mis_comment.htm?docid="+docid+'&type='+doctype+'&param='+period;
        BOILib.Util.createIFrameDialog(htmlsrc,'Foot Notes', 450, 500);
    });
</script>
</head>
<style>
    body { overflow:hidden; background:none;}
</style>
<body>
<ul class="top-links">
    <!--Added by jaroudnh on 2/17/2014 for dropdown favorites...-->
    <li>
        <a id="select" onclick="load_favorites();" class="icon-favourites" href="#"><span></span></a>
        <!--button id="select" onclick="load_favorites();">Favorites</button-->
        <ul>
            <li>
                <iframe id="favs_iframe" src="../BI_APPS_COMP_FAVORITES.HTML"  style="width: 300px; height: 400px; border: #002935; border-width: thick"></iframe>
            </li>
        </ul>
    </li>
    <!------------------------------------------------------------>
    <li><a id="bi_comment" class="icon-reportcomment" style="display: none; background-image: none;" href="#">
        <img width="18" src="../../img/icon/Comments.png" style="display: block;"/></a></li>
    <li><a id="bi_var_scr" class="icon-varscreen" style="display: none;" href="#"></a></li>
    <!--comminted by jaroudnh on 2/18/2014-->
    <!--li><a id="bi_fav_add" class="icon-favourites" style="display: none;" href="#"></a></li-->
</ul>
<!-- add for creating the title for variable screen -->
<div class="varscreen-title" title=" " id="var_screen_title" >
</div>
<div class="content">
    <div id="dialog" class="varscreen-container">
        <iframe id="screen_id" frameborder="0" src="../bi_apps_comp_variable_screen.html"></iframe>
    </div>
    <div id="tabs" class="tabs">
        <ul class="tab-title">
            <li><a href="#tabs-1"><span>Home</span></a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-content-inner">
                <div id="tabs-1">
                </div>
            </div>
        </div>
    </div>
    <div id="drilldown_id" class="drilldown-container" style="display:none;">

        <a id="back_button_id" class="back_button" href="#">
            <img width="18" src="../../img/icon/backbutton.png"/></a>
        <iframe id="drilldown_target" frameborder="0" name="drilldown_target" ></iframe>
    </div>
</div>
</body>
</html>

<%
theme = ''.
%>